<template>
  <div>
    <div>
      <button @click="change(item.componentName,index)" 
          v-for="(item,index) in list" 
          :key="index"
          :class="{active:activeIndex==index}">{{item.label}}</button>
    </div>
    <div>
       <keep-alive exclude="SportsNews,FinancialNews">
          <component :is="componentName" />
       </keep-alive>
    </div>
  </div>
</template>

<script>
import FinancialNews from "./views/FinancialNews.vue";
import HotNews from "./views/HotNews.vue";
import RecreationNews from "./views/RecreationNews.vue";
import SportsNews from "./views/SportsNews.vue";

export default {
  data() {
    return {
      activeIndex:0,
      componentName: "HotNews",
      list: [
        {
          label: "热门新闻",
          componentName: "HotNews",
        },
        {
          label: "娱乐新闻",
          componentName: "RecreationNews",
        },
        {
          label: "体育新闻",
          componentName: "SportsNews",
        },
        {
          label: "财经新闻",
          componentName: "FinancialNews",
        },
      ],
    };
  },
  methods: {
    change(arg,index) {
      this.componentName = arg;
      this.activeIndex=index
    },
  },
  components: {
    FinancialNews,
    HotNews,
    RecreationNews,
    SportsNews,
  },
};
</script>

<style>
  button{
    border: none;
  }
  .active{
    background-color: skyblue;
    border: none;
    color: white;
  }
</style>
